<template>
  <div>
    <el-dialog  class="global-dialog" v-model="dialog" :lock-scroll="false" :append-to-body="false" width="950px"
      :show-close="false" @close="close" :close-on-click-modal="false">

      <div class="my-header">
        <el-tabs v-model="data.activeName" class="demo-tabs">
          <el-tab-pane :label="title" name="first">
            <el-row class="mb10">
              <el-col :span="16" align="left">
                <div class="flex">
                  <el-input clearable v-model="data.search.expertName" placeholder="专家姓名"
                    style="width: 180px; margin-right: 15px">
                  </el-input>
                  <el-select v-model="data.search.expertType" placeholder="专家类型" style="width: 125px; margin-right: 15px"
                    clearable>
                    <el-option :label="item.itemText" :value="item.itemValue" :key="item.itemValue"
                      v-for="item in expertTypeList" />
                  </el-select>

                  <el-button color="#626aef" @click="search()">搜索</el-button>
                </div>
              </el-col>
              <!-- <el-col :span="8" align="right">
                <el-button type="primary" @click="chooseExpert">设置选中专家</el-button>
              </el-col> -->
            </el-row>
            <Table :tableArr="tableDate"   :loading="data.isLoading"  :pagination="pagination"
                   :pageSize="pagination.limit" :columns="columns"
                   @sizeChange="(size) => {
                     pagination.limit = size;
                     getTableList();
                   }"
              :operate="true" :total="pagination.total" @currentChange="currentChange" @delectTable="delectIds" >
            </Table>

          </el-tab-pane>

        </el-tabs>
      </div>


      <template #footer>
        <span class="dialog-footer">
          <el-button      @click="close"
            >关闭</el-button
          >
        </span>
        <el-button type="primary" @click="chooseExpert" style="margin-left: 10px;">设置选中专家</el-button>
      </template>


    </el-dialog>
  </div>
</template>

<script lang="js">
import {
getTable
} from "@/views/expert/api/expertsManager";
import Table from "@/views/science/components/table/table.vue";
import { ElMessage } from "element-plus";
import { onMounted, reactive, ref, toRefs } from "vue";
import { confirmExpert } from "../../../api/formExamination";

export default {
  components: {
    Table
  },
  props: {
    checkId: {
      type: String,
      required: true,
    },
    files: {
      type: Object,
      required: true,
    },
    dialog: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "",
    },
  },

  setup(props, { emit }) {
    let data = reactive({
      expertTypeList: [{ itemValue: '1', itemText: '内部专家' }, { itemValue: '2', itemText: '外部专家' }],
      checkDate:[],
      isLoading: false,
      search: {
        type: "1",
        expertType: '',
        expertName: "",
        genderId: "",
        department: "",
        job: "",
        expertiseAreaId: "",
      },
      tableDate: [],
      pagination: { page: 1, limit: 10, total: 0 }, //分页
      total: 0,
      columns: [
        {
          key: "expertName",
          width: 140,
          label: "专家姓名"
        },
        {
          key: "expertType",
          width: 140,
          label: "专家类型"
        },
        {
          key: "gender",
          width: 140,
          label: "性别"
        },
        {
          key: "age",
          width: 140,
          label: "年龄"
        },
        {
          key: "job",
          width: 140,
          label: "职务"
        },

      ],
      tableData: [],
      tableItem: { id: "" }, //当前选中的行
      expertName: "",
      page: 1,
      limit: 5,
      activeName: ref("first"),
      uploadDialog: true,


    });


    const search = () => {
      getTableList();
    };

    const close = () => {
      emit("changeDialog");
    };

    const chooseExpert = () => {
      if (data.checkDate.length==0) {
        ElMessage({
          message: "请至少选择一个专家",
          type: "warning",
        });
        return false;
      }

      // 选中专家

      confirmExpert(data.checkDate).then((res) => {
        if (res.data.code == 200) {
          close();
          ElMessage({
            message: "操作成功",
            type: "success",
          });
        }
      });
    };


    const delectIds = (ids) => {

      let ele = []
      for (let i = 0; i < data.tableDate.length; i++) {
        for (let y = 0; y < ids.length; y++) {
          if (ids[y] === data.tableDate[i].id) {
            ele.push({
              expertid: data.tableDate[i].employeeId,
              expertname: data.tableDate[i].expertName,
              applicationid: props.checkId,
            })
          }
        }
      }
      data.checkDate=ele
    }

    const pageChange = (current) => {
      data.pagination.page = current;
      getTableList();
    };

    onMounted(() => {
      getTableList();
    });

    // 获取列表信息
    let getTableList = () => {

      data.isLoading = true,

        getTable({
          current: data.pagination.page,
          size: data.pagination.limit,
          ...data.search,
        }).then((res) => {

          let resData = res.data.data // 获取列表数据
          resData.records.map((item) => {
            if (item.expertType == 1) {
              item.expertType = "内部专家"
            } else if (item.expertType == 2) {
              item.expertType = "外部专家"

            }
          })
          data.tableDate = resData.records;
          data.pagination.total = res.data.data.total;
          data.isLoading = false;
        });
    };



    let currentChange = (current) => {

      data.pagination.page = current;

      getTableList();

    };


    const form = reactive({
      unit: "",
      score: "",
      role: "",
    });

    const submitState = () => {
      emit("changeDialog");
    };
    return {
      close,
      pageChange,
      chooseExpert,
      data,
      form,
      submitState,
      ...toRefs(data),
      currentChange,
      search,
      delectIds,
      getTableList,

    };
  },
};
</script>

<style scoped lang="scss">
.tc {
  text-align: center;
  margin-top: 10px;
}
</style>
